<template>
  <div class="interview">
    <el-form>

      <el-alert
        :title="`共${total}条记录`"
        type="info"
        show-icon
        :closable="false"
        style="margin:20px 0"
      />
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
      >
        <el-table-column
          fixed
          type="index"
          :index="indexMethod"
          label="序号"
          width="150"
        />
        <el-table-column
          prop="title"
          label="文章标题"
          width="180"
        />
        <el-table-column
          prop="visits"
          label="阅读数"
          width="100"
        />
        <el-table-column
          prop="username"
          label="录入人"
        />
        <el-table-column
          prop="createTime"
          label="录入时间"
        />
        <el-table-column
          prop="state"
          label="状态"
        />

        <el-table-column label="操作">
          <template slot-scope="scope">

            <el-button type="text" @click="handleWatch(scope.row)">预览</el-button>
            <el-button type="text" @click="handleStart(scope.row)">启用</el-button>
            <el-button type="text" @click="handleEdit(scope.row)">修改</el-button>
            <el-button type="text" @click="handleDel(scope.row)">删除</el-button>

          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <!-- 预览弹框 -->
    <el-dialog
      title="预览文章"
      :visible.sync="seeDialog"
      width="30%"
      @close="seeDialog=false"
    >
      <h2>{{ getDetail.title }}</h2>
      <div>
        <span>{{ getDetail.createTime }}</span>
        <span style="padding:20px"> {{ getDetail.creatorID }}</span>
        <span class="el-icon-view">{{ getDetail.visits }}</span>
      </div>
      <div v-html="getDetail.articleBody" />
    </el-dialog>
  </div>
</template>

<script>
import { getInterviewAPI, getInterviewDetail, delInterviewList } from '@/api/interview'

export default {
  name: 'Interview',
  data() {
    return {
      seeDialog: false,
      tableData: [],
      total: '',
      query: {
        page: 1,
        pagesize: 10
      },
      getDetail: {
        title: '',
        createTime: '',
        creatorID: '',
        visits: '',
        articleBody: ''

      }

    }
  },
  created() {
    this.getInterview()
  },
  methods: {
    indexMethod(index) {
      // 当前页数据的序号+1 +（当前页码-1）*每页条数
      return index + 1 + (this.query.page - 1) * this.query.pagesize
    },
    async getInterview() {
      const resp = await getInterviewAPI(this.query, this.querysize)
      console.log(resp)
      // 拿到对象数组中的值

      for (const [index, item] of resp.items.entries()) {
        console.log(index, item)
        item.state = +item.state ? '已启用' : '已禁用'
      }

      this.tableData = resp.items
      this.total = resp.counts
    },
    // 预览
    async handleWatch(row) {
      this.seeDialog = true
      const resp = await getInterviewDetail(row.id)
      console.log(resp)
      this.getDetail.title = resp.title
      this.getDetail.createTime = resp.createTime
      this.getDetail.creatorID = resp.creatorID
      this.getDetail.visits = resp.visits
      this.getDetail.articleBody = resp.articleBody
    },
    // 启用
    handleStart() {

    },
    // 修改
    handleEdit() {},
    // 删除
    async handleDel(row) {
      await delInterviewList(row.id)
      this.getInterview()
      this.$message.success('删除成功')
    }
  }

}
</script>

<style lang="scss" scoped>

</style>
